<template>
  <div class="bill-print" ref="PrintRef" hidden="hidden">
    <div class="summary">
      <div class="col1">Finance No.: {{ row.financeNo }}</div>
      <div class="col1">Fee Name.: {{ row.feeName }}</div>
      <div class="col1">Fee Type: {{ row.serviceTypeName }}</div>
      <div class="col1">Amount: {{ row.amount }}</div>
      <div class="col1">Payee Name: {{ row.payeeName }}</div>
      <div class="col1">Payer Name: {{ row.payerName }}</div>
      <div class="col1">Date: {{ row.createTime }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['row'],
  methods: {
    start() {
      this.$print(this.$refs.PrintRef, {}, 'A4')
    },
  }
}
</script>

<style lang="stylus" media="print">
@page {
  size: auto;
  margin: 0;
}

@media print {
  * {
    color: #000 !important;
  }

  table {
    width 100%
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table, tbody, thead {
    width: 100% !important;
  }

  .bill-print {
    width: 100% !important;
    font-size: 14px;
  }

  table, table tr th, table tr td {
    border: 0.05rem solid #000;
    font-size: 12px;
  }

}

.bill-print
  padding 12px
  line-height 1.8

  .summary
    display flex
    flex-wrap wrap

    .col1
      width 50%

  .title
    font-size 18px
    text-align center

  .common-table
    td, th
      border-color black
</style>
